@keyframes reverse-pulse-opacity {
  0% {
    opacity: .8
  }

  50% {
    opacity: .2
  }

  to {
    opacity: .8
  }
}

@keyframes pulse-opacity {
  0% {
    opacity: .2
  }

  50% {
    opacity: .8
  }

  to {
    opacity: .2
  }
}

.preview {
  position: relative;
  background: #293033;
  padding: 180px 0 170px;

  &:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-image: -webkit-radial-gradient(center 300%,rgba(0,144,255,.9) 10%,rgba(5,122,204,.6) 75%);
    animation: reverse-pulse-opacity 7s linear infinite;
  }

  &:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-image: linear-gradient(to bottom right,rgba(69,130,245,.8),rgba(187,114,227,.3));
    animation: pulse-opacity 7s linear infinite;
  }

  &_content {
    height: 100%;
    position: relative;
    z-index: 1;
    color: white;
    max-width: 770px;
    display: flex;
    flex-direction: column;
    gap: 40px;

    > * {
      margin: 0;
    }
  }
}

.features {
  padding: 100px 0 125px;

  &_title {
    margin-bottom: 75px;
  }

  &_list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 80px 7.5vw;

    * {
      margin: 0;
    }

    li {
      display: flex;
      flex-direction: column;
      gap: 22px;
    }
  }
}

.m_width {
  padding: 0 200px;
}

@media (max-width: 1024px) {
  .features {
    padding: 93px 0;

    &_list {
      grid-template-columns: repeat(1,1fr);
    }
  }
}

@media (max-width: 1200px) and (min-width: 769px) and (min-height: 376px) {
  .m_width {
    padding: 0 70px;
  }
}

@media (max-width: 768px), (max-width: 812px) and (max-height: 375px) {
  .m_width {
    padding: 0 30px;
  }

  .preview {
    padding: 168px 0 94px;
  }
}
